<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
	<title>娱管家</title>  
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="x5-orientation" content="portrait">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Access-Control-Allow-Origin" content="">
	<meta http-equiv="content-security-policy">
	<script type="text/javascript" src="js/jquery.min.js" ></script>
	<!--mui样式-->
	<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/mui/app.css"/>
	<link rel="stylesheet" type="text/css" href="css/mui/mui.picker.css"/>
	<link rel="stylesheet" type="text/css" href="css/mui/mui.picker.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/mui/mui.poppicker.css"/>
	<!--环信-->
	<script type="text/javascript" src="js/hx/strophe.js" ></script>
	<script type="text/javascript" src="js/hx/websdk-1.1.2.js"></script>
	<script type="text/javascript" src="js/hx/websdk.config.js"></script>
	<script type="text/javascript" src="js/hx/websdk.shim.js"></script> 
	<script type="text/javascript" src="js/bq.js"></script> 
	<!--环信-->
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yWnFso0oyjmX79HzCx1DRz2sBtvweQfI"></script>
	<link rel="stylesheet" href="css/loding/fakeLoader.css"/>
	<!--头像上传-->
	<link rel="stylesheet" href="css/cropper.css"/>
	<script src="js/cropper.js"></script>
	<!-- 公共样式与字体  -->
	<link rel="stylesheet" href="css/public.css"/>
	<link rel="stylesheet" type="text/css" href="icon-font/iconfont.css"/>
	<!-- 定制样式   -->
	<link rel="stylesheet" href="css/style.css"/>
	<link rel="stylesheet" href="css/bq.css" />
	<link rel="stylesheet" type="text/css" href="css/NewStyle.css?t=1"/>
	<!-- Swiper 样式  -->
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
	<link rel="stylesheet" href="css/appstyle.css" />

	<!-- 微信分享 -->
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
	<style>
		body *{ background-color: #fff; }
		.tpl_ShareMj_Detail_main{
			position: static !important;
			padding: 0;
			display: block;
			height: calc(100vh - 0.6rem);
			overflow-x: hidden;
			overflow-y: auto;
		}
		.ShareMj_Detail_head{
		    height: 0.79rem;
		    width: 100%;
		    text-align: center;
		    line-height: 0.79rem;
		    background-color: #fff;
		}
		.ShareMj_Detail_head h2{
			overflow: hidden;
		    height: 100%;
		    width: 100%;
		    white-space: nowrap;
		    text-overflow: ellipsis;
		    color: #333;
		    font-weight: normal;
		    font-size: 0.32rem;
		}
	</style>
</head>
<body>
	<div class="App">
		<span style="background-color: #eee;">娱管家</span>
		<button>下载APP</button>
	</div>
	<main class="tpl_ShareMj_Detail_main">
		<div class="ShareMj_Detail_head">
			<h2>麻将机详情</h2>
		</div>
		<!--麻将机详情的第一个logo图-->
		<div class="ShareMj_Detail_logo">
			<img src="images/test/3.jpg" alt="" />
		</div>
		<!--文字介绍-->
		<div class="ShareMj_Detail_text">
			<p class="red-font">麻将机参数</p>
			<ul>
				<li>购买年份：<span>2018</span> 月份：<span>7</span></li>
				<li>款式：<span>折叠款</span></li>
				<li>麻将牌大小：<span>42</span></li>
				<li>张数：<span>136</span></li>
				<li>配件：<span>盖板、取暖器</span></li>
				<li>新旧程度：<span>九成新</span></li>
				<li>意向租金：<span>100/月</span></li>
				<li>姓名：<span>老王</span></li>
				<li>地址： <span>上海市奉贤区南桥镇望园南路6588弄</span></li>
				<li>售价：<span class="red-font">500元</span></li>
				<li>备注：<span>发的是荆防颗粒合适的人发我放假</span></li>
			</ul>
		</div>
		<!--图片展示-->
		<div class="ShareMj_Detail_img">
			<p>图片展示：</p>
			<!-- <img src="images/test/3.jpg" alt="" />
			<img src="images/test/3.jpg" alt="" />
			<img src="images/test/3.jpg" alt="" /> -->
		</div>
		<!-- 猜你喜欢 -->
		<div class="guessLike">
			<div class="guessLike_logo"></div>
			<ul class="ShareMj_navC1" page='1'>
				<!-- <li>
					<div class="ShareMj_list_pic">
						<img src="images/test/2.jpg" alt="" />
					</div>
					<div class="ShareMj_list_text">
						<div class="ShareMj_list_title">
							<p>四口机餐桌款闲置麻将机（共享可租赁）</p>
							<i>可售</i> <i>共享</i>
						</div>
						<div class="ShareMj_list_Num">
							<p>访问量：25688</p>
							<i>删除</i>
						</div>
						<div class="ShareMj_list_address">
							<p>地址：上海市奉贤区南桥镇望园南路6588弄</p>
							<i>0.5km</i>								
						</div>
					</div>
				</li> -->
			</ul>
		</div>
		<!--按钮-->
		<button class="ShareMj_Detail_btn">立即咨询</button>
	</main>
	<div class="" id="tan2"></div>
	<script src="js/muijs/mui.min.js"></script>
	<script src="js/muijs/mui.picker.min.js"></script>
	<script src="js/muijs/mui.poppicker.js"></script>
	<script src="js/base.js"></script>
	<script src="js/swiper.min.js"></script>
	<!-- <script src="js/vconsole.min.js"></script> -->
	<script type="text/javascript">
		// var vConsole = new VConsole();
		var member_no = null;//会员号
		var latitude = null,//纬度
			longitude = null;//经度
		if(navigator.geolocation){
		  navigator.geolocation.getCurrentPosition(onSuccess , onError);
		}else{
		  mui.toast("您的浏览器不支持使用HTML5来获取地理位置服务");
		}
		//定位数据获取成功响应
		function  onSuccess(position){
			latitude = position.coords.latitude;
			longitude = position.coords.longitude;
			dataFn(function(){});
		}
		//定位数据获取失败响应
		function onError(error) {
		  switch(error.code)
		  {
		    case error.PERMISSION_DENIED:
		    mui.toast("您拒绝对获取地理位置的请求");
		    break;
		    case error.POSITION_UNAVAILABLE:
		    mui.toast("位置信息是不可用的");
		    break;
		    case error.TIMEOUT:
		    mui.toast("请求您的地理位置超时");
		    break;
		    case error.UNKNOWN_ERROR:
		    mui.toast("未知错误");
		    break;
		  }
		}

		var share_link = location.href;
		var share_data = {
	        title: '娱管家',// 设置分享标题
	        desc: '',// 设置分享描述
	        link: share_link,// 设置分享链接
	        img: ''// 分享图片
	    };
	    var token = GetQueryString('token');
		$('.App button').unbind('click').on('click',function(){
			location.href = 'http://www.yuzhuli.com/Share/erweima.html?id='+token;
		});
	    function GetQueryString(name){
		    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
		    var r = window.location.search.substr(1).match(reg);
		    if(r!=null)return  unescape(r[2]); return null;
		}
		var parm = GetQueryString('id');
		var url = 'http://www.yuzhuli.com/api.php/mahjong/info';
		$.post(url,{id:parm},function(res){
			if(res.s){
				member_no = res.info.member_no;
				$('.header_1 h2').text(res.info.title);
				$('.ShareMj_Detail_logo img').attr('src',res.info.img);
				var _y = res.info.buy_month == '' ?  '' : '月份：'+res.info.buy_month;
				var mahjong_style = res.info.mahjong_style == '' ? '' : '款式：'+res.info.mahjong_style;
				var mahjong_num = res.info.mahjong_num == 0 ? '' : '张数：'+res.info.mahjong_num;
				var new_old_degree = res.info.new_old_degree == '' ? '' : '新旧程度：'+res.info.new_old_degree;
				var intentional_rent = parseInt(res.info.intentional_rent) == 0 ? '意向租金：电联' : '意向租金：'+parseInt(res.info.intentional_rent)+'/月';
				var sale_price = parseInt(res.info.sale_price) == 0 ? '售价：<span class="red-font">不可售</span>' :  '售价：<span class="red-font">'+ parseInt(res.info.sale_price)+'元</span>';
				$('.ShareMj_Detail_text ul li').eq(0).text("购买年份："+res.info.buy_year+_y);
				$('.ShareMj_Detail_text ul li').eq(1).text(mahjong_style);
				$('.ShareMj_Detail_text ul li').eq(2).text('麻将牌大小：'+res.info.mahjong_size);
				$('.ShareMj_Detail_text ul li').eq(3).text(mahjong_num);
				$('.ShareMj_Detail_text ul li').eq(4).text('配件：'+res.info.mahjong_parts);
				$('.ShareMj_Detail_text ul li').eq(5).text(new_old_degree);
				$('.ShareMj_Detail_text ul li').eq(6).text(intentional_rent);
				$('.ShareMj_Detail_text ul li').eq(7).text('姓名：'+res.info.user_name);
				$('.ShareMj_Detail_text ul li').eq(8).text('地址：'+res.info.address);
				$('.ShareMj_Detail_text ul li').eq(9).html(sale_price);
				$('.ShareMj_Detail_text ul li').eq(10).text('备注：'+res.info.remarks);				
				var imgArr = res.info.images.split(',');
				for(var i=0;i<imgArr.length;i++){
					$('.ShareMj_Detail_img').append('<img src="'+imgArr[i]+'" / >');
				}

				if(res.info.img){
					share_data.img = res.info.img;
				}else{
					share_data.img = "http://www.yuzhuli.com/Share/images/share_logo.png";
				}
				share_data.title = res.info.title;
				share_data.desc = "共享麻将机";
			    getWxConfig(ApiList, wxConfigCallback, false);
			}else{
				mui.toast(res.m);
			}
		})

		var _judge = true;
		$('.tpl_ShareMj_Detail_main').unbind('scroll').bind('scroll',function(){
			var $this = $(this),
				viewH = $(this).height(), //可见高度
				contentH = $(this).get(0).scrollHeight, //内容高度
				scrollTop = $(this).scrollTop(); //滚动高度
			if(scrollTop / (contentH - viewH) >= 0.95) { //到达底部100px时,加载新内容
				if(_judge){
					_judge = false;
					dataFn(function(i){
						if(i){ _judge = true; }else{ mui.toast('暂无更多数据！'); }
					});
				}
			}
		})
		function dataFn(fn){
			var page = $('.ShareMj_navC1').attr('page');
			var html = '';
			var url = 'http://www.yuzhuli.com/api.php/mahjong/search';
			$.post(url,{page:page,lng:longitude,lat:latitude},function(res){
				if(res.s){
					if(res.list.length==0){ fn(false); return; };
					for(var i=0;i<res.list.length;i++){
						html+='<li id="'+res.list[i].id+'" onclick="jumpDetail(this)">';
						html+='<a href="#/tpl_ShareMj_Detail/'+res.list[i].id+'">';
						html+='	<div class="ShareMj_list_pic">';
						html+='		<img src="'+res.list[i].img+'" alt="" />';
						html+='	</div>';
						html+='	<div class="ShareMj_list_text">';
						html+='		<div class="ShareMj_list_title">';
						html+='			<p>'+res.list[i].title+'</p>';
						if(res.list[i].is_sales==1){ html+= '<i>可售</i>'; }
						html+='		<i>共享</i>';
						html+='		</div>';
						html+='		<div class="ShareMj_list_Num">';
						html+='			<p>访问量：'+res.list[i].page_view+'</p>';
						html+='		</div>';
						html+='		<div class="ShareMj_list_address">';
						html+='			<p>地址：'+res.list[i].address+'</p>';
						html+='			<i>'+((res.list[i].distance)/1000).toFixed(1)+'km</i>';								
						html+='		</div>';
						html+='	</div>';
						html+='</a>';
						html+='</li>';
					}
					$('.ShareMj_navC1').append(html);
					var _p = Number(page) + 1;
					$('.ShareMj_navC1').attr('page',_p);
					fn(true);
				}else{
					mui.toast(res.m);
				}
			})
		}
		// 猜你喜欢部分跳转
		function jumpDetail(e){
			var id = $(e).attr("id");
			var url = "http://www.yuzhuli.com/Share/ShareMj.html?id="+id;
			window.location.href = url;
		}
		// 点击立即咨询
		$(".ShareMj_Detail_btn").click(function(){
			var url = "http://www.yuzhuli.com/Share/erweima.html?id="+token;
			window.location.href = url;
		})
	     // 分享
	    function getWxConfig(ApiList, callback, debug) {    		
	        $.ajax({
	            url: 'http://www.yuzhuli.com/api.php/api/wechat_js_config',
	            type: 'POST',
	            dataType: 'json',
	            data: {url: location.href,apis:ApiList,debug:debug},
	        }).done(function (res) {
	        	console.log(res);
	            if (res.s) {
	                var con = res.config;
	                var wxConf = {
	                    debug: debug,
	                    appId: con.appId,
	                    timestamp: con.timestamp,
	                    nonceStr: con.nonceStr,
	                    signature: con.signature,
	                    jsApiList: ApiList
	                };
	                wx.config(wxConf);
	                wx.ready(function () {
	                    callback();
	                });
	            }
	        }).fail(function () {
	            console.log("error");
	        }).always(function () {
	            console.log("complete");
	        });
	    }
	    var ApiList = [
	        'onMenuShareTimeline',
	        'onMenuShareAppMessage',
	        'onMenuShareQQ',
	        'onMenuShareQZone',
	        'onMenuShareWeibo',
	    ];	
	    
	    function wx_share(data, callback) {
	        // 分享到朋友圈
	        wx.onMenuShareTimeline({
	            title: data.title, // 分享标题
	            link: data.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
	            imgUrl: data.img, // 分享图标
	            success: function () {
	                // 用户确认分享后执行的回调函数
	            },
	            cancel: function () {
	                // 用户取消分享后执行的回调函数
	            }
	        });
	        // 分享给朋友
	        wx.onMenuShareAppMessage({
	            title: data.title, // 分享标题
	            desc: data.desc, // 分享描述
	            link: data.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
	            imgUrl: data.img, // 分享图标
	            type: '', // 分享类型,music、video或link，不填默认为link
	            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
	            success: function () {
	                // 用户确认分享后执行的回调函数
	            },
	            cancel: function () {
	                // 用户取消分享后执行的回调函数
	            }
	        });
	        wx.onMenuShareQQ({
				title: data.title, // 分享标题
				desc: data.desc, // 分享描述
				link: data.link, // 分享链接
				imgUrl: data.img, // 分享图标
				success: function () {
				// 用户确认分享后执行的回调函数
				},
				cancel: function () {
				// 用户取消分享后执行的回调函数
				}
			});
			wx.onMenuShareQZone({
				title: data.title, // 分享标题
				desc: data.desc, // 分享描述
				link: data.link, // 分享链接
				imgUrl: data.img, // 分享图标
				success: function () {
				// 用户确认分享后执行的回调函数
				},
				cancel: function () {
				// 用户取消分享后执行的回调函数
				}
			});
			wx.onMenuShareWeibo({
				title: data.title, // 分享标题
				desc: data.desc, // 分享描述
				link: data.link, // 分享链接
				imgUrl: data.img, // 分享图标
				success: function () {
				// 用户确认分享后执行的回调函数
				},
				cancel: function () {
				// 用户取消分享后执行的回调函数
				}
			});
	    }	
	    var shareCallback = function (type, status) {
			
	    }	
	    var wxConfigCallback = function () {
//	    	$("audio")[0].play();
	        wx_share(share_data, shareCallback);	        
	    }	
	    
	    wx.error(function (res) {
	        console.log(JSON.stringify(res));
	        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
	    });
	</script>
</body>
</html>
